<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<link rel="stylesheet" href="../../css/addGoodsInventoryTransfer.css" />
		<style>
			body {
				background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<div style="border: 1px black solid; padding: 10px;">
			<div class="layui-inline" style="width:580px; margin: 0px 35px 0px 10px;">
				<fieldset class="table-search-fieldset" style="margin:0px; height: 480px;">
					<legend style="margin-left: 15px;">查询商品列表</legend>

					<form class="layui-form layui-inline">
						<input type="hidden" id="comaddstate">
						<div class="layui-input-inline">
							<div style="height:30px; text-indent:1em;">请输入商品编号或名称查询商品,查询到商品后添加到右边所选商品</div>
							<label class="layui-form-lable" style="margin-left:30px;">输入商品编号或名称查询</label>
							<div class="layui-input-inline" style="margin: 0px 20px 0px 5px;">
								<input type="text" class="layui-input" />
							</div>

						</div>
					</form>

					<button class="layui-btn layui-btn-radius layui-btn-normal" style="margin-top: 30px;" id="selectedItemBtn">加入所选商品</button>

					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li class="layui-this">商品清单</li>
							<li>商品列表</li>
						</ul>
						<div class="layui-tab-content" style="width: 560px;">
							<div class="layui-tab-item layui-show" style="margin-left: 20px;">
								<div>
									<!--商品清单-->
									<table class="layui-hide" id="articleRepertoire" lay-filter="currentTableFilter"></table>
								</div>
							</div>
							<div class="layui-tab-item">
								<div class="layui-inline" style="width: 149px; border: 1px red solid; margin: 0px 20px;">
									asd
								</div>
								<div class="layui-inline" style="width: 365px;">
									<!--商品列表-->
									<table class="layui-hide" id="articleSurface" lay-filter="currentTableFilter"></table>
								</div>
							</div>
						</div>
					</div>
				</fieldset>

			</div>

			<div class="layui-inline">
				<fieldset class="table-search-fieldset" style="margin:0px;height:480px;padding:0px 10px;">
					<legend style="margin-left: 15px;">所选商品</legend>

					<div class="layui-tab-item layui-show">
						<div style="width: 618px;">
							<!--商品清单-->
							<table class="layui-hide" id="chooseArticle" lay-filter="currentTableFilter"></table>
						</div>
					</div>

					<div>
						<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">修改</button>
						<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">删除</button>
						<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">确认</button>
						<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">取消</button>
					</div>
				</fieldset>
			</div>

		</div>

		<div id="commodityInformationPopup" style="padding:0px 5px; display: none;">
			<fieldset class="table-search-fieldset" style="width: 576px;">
				<legend style="margin-left: 15px;">查询商品列表</legend>

				<div class="layui-inline" style="width:200px;margin-left:70px;">
					<div><span>商品编号</span>：<span>12324</span></div>
					<div><span>规格型号</span>：<span>12345</span></div>
					<div><span>当前库存</span>：<span>12345</span></div>
					<div><span>生产厂商</span>：<span>12345</span></div>
				</div>

				<div class="layui-inline">
					<div><span>商品名称</span>：<span>12324</span></div>
					<div><span>单位</span>：<span>12345</span></div>
					<div><span>批注文号</span>：<span>12345</span></div>
					<div><span>备注</span>：<span>12345</span></div>
				</div>
				<hr/>

				<form class="layui-form layui-inline">
					<div>
						<label class="layui-form-lable" style="margin-left: 70px;">数量:</label>
						<div class="layui-input-inline">
							<input type="text" style="height:20px; width:100px;" />
						</div>
						
						<label class="layui-form-lable" style="margin-left: 60px;">产品批次:</label>
						<div class="layui-input-inline">
							<input type="text" style="height:20px; width:100px;" />
						</div>
					</div>
					
					<div class="layui-inline" style="margin: 10px 20px 10px 330px;">
						<span>当前库存：</span><span>3盒</span>
					</div>
					<div class="layui-inline" style="margin: 10px 0px 10px 0px;">
						<span>有效期：</span><span>2007-04</span>
					</div>
				</form>
			</fieldset>
			
			<div style="text-align:center;">
				<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" style="margin: 10px 150px 0px 0px;">确认</button>
				<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" style="margin-top: 10px;">取消</button>
			</div>
			
			<div>
				<span>商品批次信息</span>
				<fieldset class="table-search-fieldset commodityBatchInfo" style="width:576px; padding-left:1px;">
					<legend style="margin-left: 15px;">可以在下面列表中选择不同批次的商品</legend>
					
					<div class="layui-tab-item layui-show">
						<!--商品批次信息-->
						<table class="layui-hide" id="commodityBatch" lay-filter="currentTableFilter"></table>
					</div>
				</fieldset>
			</div>
		</div>

		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				layui.use(['form', 'table'], function() {
					var form = layui.form,
						layer = layui.layer,
						$ = layui.$;
					table = layui.table;
					
					/*商品清单*/
					table.render({
						elem: '#articleRepertoire',
						//url: '../api/aaaaa.json',
						data: [],
						height: '300',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
								field: 'id',
								width: 100,
								title: '商品编号'
							}, {
								field: 'username',
								width: 140,
								title: '商品名称'
							}, {
								field: 'sex',
								width: 60,
								title: '单位'
							}, {
								field: 'city',
								width: 60,
								title: '规格'
							}, {
								field: 'sign',
								title: '库存量',
								width: 80
							}, {
								field: 'experience',
								width: 120,
								title: '生产商'
							}]
						]
					});
				
					/*商品列表*/
					table.render({
						elem: '#articleSurface',
						//url: '../api/aaaaa.json',
						data: [],
						height: '300',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
								field: 'id',
								width: 100,
								title: '商品编号'
							}, {
								field: 'username',
								width: 140,
								title: '商品名称'
							}, {
								field: 'sex',
								width: 60,
								title: '单位'
							}, {
								field: 'city',
								width: 60,
								title: '规格'
							}]
						]
					});
				
					/*选择商品*/
					table.render({
						elem: '#chooseArticle',
						//url: '../api/aaaaa.json',
						data: [],
						height: '400',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
								field: 'id',
								width: 130,
								title: '商品名称'
							}, {
								field: 'username',
								width: 60,
								title: '单位'
							}, {
								field: 'sex',
								width: 60,
								title: '规格'
							}, {
								field: 'city',
								width: 60,
								title: '数量'
							}, {
								field: 'sign',
								title: '生产批号',
								width: 100
							}, {
								field: 'experience',
								width: 100,
								title: '生产日期'
							}, {
								field: 'experience',
								width: 100,
								title: '有效日期'
							}]
						]
					});
					
					/*商品批次信息*/
					table.render({
						elem: '#commodityBatch',
						//url: '../api/aaaaa.json',
						data: [],
						height: '170',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
								field: 'id',
								width: 81,
								title: '商品编号'
							}, {
								field: 'username',
								width: 81,
								title: '商品名称'
							}, {
								field: 'sex',
								width: 81,
								title: '进货日期'
							}, {
								field: 'city',
								width: 81,
								title: '库存数量'
							}, {
								field: 'sign',
								title: '产品批次',
								width: 81
							}, {
								field: 'experience',
								width: 81,
								title: '生产日期'
							}, {
								field: 'experience',
								width: 81,
								title: '有效日期'
							}]
						]
					});
				
					$('#selectedItemBtn').click(function() {
						addhotd();
					});
				
					var comaddstate = $('#comaddstate').val();
					function addhotd() {
						layer.open({
							type: 1,
							title: '商品信息('+ comaddstate +')',
							content: $('#commodityInformationPopup'),
							area: ["600px", "520px"]
						})
					};
				
					//监听提交
					form.on('submit(saveBtn)', function(data) {
						var index = layer.alert(JSON.stringify(data.field), {
							title: '最终的提交信息'
						}, function() {
				
							// 关闭弹出层
							layer.close(index);
				
							var iframeIndex = parent.layer.getFrameIndex(window.name);
							parent.layer.close(iframeIndex);
				
						});
				
						return false;
					});
				
				});
			});
			
		</script>
	</body>

</html>